/**
 *  base map
 * 1. 是一个基类， 子类可以继承这里的地图实例， L.map 方法都能使用
 * 2. 可以添加覆盖层
 * */
import 'leaflet/dist/leaflet.css';
import React from 'react';
import L from 'leaflet';
import { isEmpty } from 'lodash';
import { Map /* ZoomControl */ } from 'react-leaflet';
import './index.less';
import 'src/util/leaflet-baidumap';
import setting from './setting';

export const lContext = React.createContext({
  isMapDrag: true,
  switchMapDrag: () => {},
});
class MapGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isMapDrag: true,
    };
    this.setDataPool();
  }

  switchMapDrag = (isMapDrag) => {
    this.setState({
      isMapDrag,
    });
  };

  getZoom(zoom, minZoom, maxZoom) {
    if (zoom < minZoom) return minZoom;
    if (zoom > maxZoom) return maxZoom;
    return zoom;
  }

  // 更新store中的dataPoll
  setDataPool() {
    const {
      bigScreen: { setDataPool },
      events,
      config,
    } = this.props;
    const { click } = events || {};
    if (!click) {
      return;
    }
    const { lat, lng, zoom } = config.base;
    setDataPool(click, { slatitude: lat, slongitude: lng, level: zoom });
  }

  render() {
    const {
      width,
      height,
      config: { base },
      children,
      editable,
      data,
    } = this.props;
    const { isMapDrag } = this.state;
    const {
      zoomable,
      dragable,
      lat,
      lng,
      zoom,
      minZoom = 3,
      maxZoom = 19,
    } = base;

    let validLat = lat;
    let validLng = lng;
    let validZoom = zoom;

    if (!isEmpty(data) && !isEmpty(data[0])) {
      const { lat: dLat, lng: dLng, zoom: dZoom } = data[0];
      // eslint-disable-next-line eqeqeq
      validLat = !!dLat || dLat == '0' ? dLat : lat;
      // eslint-disable-next-line eqeqeq
      validLng = !!dLng || dLng == '0' ? dLng : lng;
      validZoom = +dZoom || zoom;
    }

    if (validLat >= 90) {
      validLat = 89;
    } else if (validLat <= -90) {
      validLat = -89;
    }

    const mapProps = {
      crs: L.CRS.Baidu,
      center: [validLat, validLng],
      zoom: this.getZoom(validZoom, minZoom, maxZoom),
      minZoom,
      attributionControl: false,
      doubleClickZoom: zoomable,
      zoomControl: false,
      boxZoom: zoomable,
      scrollWheelZoom: zoomable,
      dragging: isMapDrag ? dragable : false,
      maxZoom,
    };

    if (editable) {
      Object.assign(mapProps, {
        boxZoom: false,
        scrollWheelZoom: false,
        dragging: false,
      });
    }
    return (
      <div style={{ width, height }}>
        <Map
          key={`${width}_${height}`}
          {...mapProps}
          style={{ width, height, background: 'none' }}
        >
          <lContext.Provider
            value={{ isMapDrag, switchMapDrag: this.switchMapDrag }}
          >
            {children}
          </lContext.Provider>
        </Map>
      </div>
    );
  }
}

MapGroup.setting = setting;
MapGroup.childrenCom = {
  custom_map_group_base: () => import('./LBaseLayer'),
  custom_map_group_geoheat: () => import('./LGeoHeat'),
  custom_map_group_bubble: () => import('./LBubble'),
  custom_map_group_flyline: () => import('./FlyLine'),
  custom_map_group_compare: () => import('./LCompare'),
  custom_map_group_geojson: () => import('./LGeoJson'),
  custom_map_group_gridHeat: () => import('./LGridHeat'),
  custom_map_group_heatmap: () => import('./LHeatLayer'),
  custom_map_group_ifreamMarker: () => import('./LIfreamMarker'),
  custom_map_group_marker: () => import('./LMarker'),
  custom_map_group_select: () => import('./LSelect'),
  custom_map_group_track: () => import('./LTrack'),
  custom_map_group_pseudo3D: () => import('./Pseudo3D'),
};

export default MapGroup;
